<template>
    <v-app-bar
        app
        color="primary"
        dark
    >
        <div class="d-flex align-center">
            MQTTV
        </div>
        <v-menu offset-y>
            <template v-slot:activator="{ on, attrs }">
                <v-btn
                    style="margin-left:20px;"
                    text
                    v-bind="attrs"
                    v-on="on"
                >
                    {{ currProject && currProject.name ? '当前项目:' + currProject.name : '选择项目' }}
                </v-btn>
            </template>
            <v-list>
                <v-list-item @click="showAddProject">
                    <v-list-item-title>添加项目</v-list-item-title>
                </v-list-item>
                <v-list-item @click="showEditProject">
                    <v-list-item-title>编辑当前选择</v-list-item-title>
                </v-list-item>
                <v-list-item @click="delProject">
                    <v-list-item-title>删除当前选择</v-list-item-title>
                </v-list-item>
                <v-divider/>
                <v-list-item @click="clearChooseProject">
                    <v-list-item-title>清除选择</v-list-item-title>
                </v-list-item>
                <v-divider />
                <v-list-item
                    v-for="(item, index) in projects"
                    :key="index"
                    @click="chooseProject(item)"
                >
                    <v-list-item-title>{{ item.name }}</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-menu>
        <v-menu offset-y>
            <template v-slot:activator="{ on, attrs }">
                <v-btn
                    style="margin-left:20px;"
                    text
                    v-bind="attrs"
                    v-on="on"
                >
                    {{ currServer && currServer.name ? '当前服务器:' + currServer.name : '选择服务器' }}
                </v-btn>
            </template>
            <v-list>
                <v-list-item @click="showAddServer">
                    <v-list-item-title>添加服务器</v-list-item-title>
                </v-list-item>
                <v-list-item @click="showEditServer">
                    <v-list-item-title>编辑当前选择</v-list-item-title>
                </v-list-item>
                <v-list-item @click="delServer">
                    <v-list-item-title>删除当前选择</v-list-item-title>
                </v-list-item>
                <v-divider/>
                <v-list-item @click="clearChooseServer">
                    <v-list-item-title>清除选择</v-list-item-title>
                </v-list-item>
                <v-divider />
                <v-list-item
                    v-for="(item, index) in servers"
                    :key="index"
                    @click="chooseServer(item)"
                >
                    <v-list-item-title>{{ item.name }}</v-list-item-title>
                    <v-list-item-subtitle>{{ item.url }}</v-list-item-subtitle>
                </v-list-item>
            </v-list>
        </v-menu>
        <v-spacer></v-spacer>

        <v-menu offset-y>
            <template v-slot:activator="{ on, attrs }">
                <v-btn
                    style="margin-left:20px;"
                    text
                    v-bind="attrs"
                    v-on="on"
                >
                    菜单
                </v-btn>
            </template>
            <v-list>
                <v-list-item>
                    <v-list-item-title>导出</v-list-item-title>
                </v-list-item>
                <v-divider />
                <v-list-item @click="aboutDialog=true">
                    <v-list-item-title>关于</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-menu>
        <v-dialog
            v-model="addProjectDialog"
            max-width="290"
        >
            <v-card>
                <v-card-title class="text-h5">
                    添加项目
                </v-card-title>

                <v-card-text>
                    <v-container>
                        <v-form>
                            <v-text-field
                                v-model="editProject.name"
                                label="名称"
                                required
                            ></v-text-field>
                            <v-text-field
                                v-model="editProject.desc"
                                label="描述"
                            ></v-text-field>
                        </v-form>
                    </v-container>
                </v-card-text>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="blue darken-1"
                        text
                        @click="addProjectDialog = false"
                    >
                        关闭
                    </v-btn>
                    <v-btn
                        color="blue darken-1"
                        text
                        @click="saveProject"
                    >
                        保存
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- server add-->
        <v-dialog
            v-model="addServerDialog"
            max-width="400"
        >
            <v-card>
                <v-card-title class="text-h5">
                    添加服务器
                </v-card-title>

                <v-card-text>
                    <v-container>
                        <v-form>
                            <v-text-field
                                v-model="editServer.name"
                                label="名称"
                                required
                            ></v-text-field>
                            <v-text-field
                                v-model="editServer.url"
                                label="连接"
                                required
                            ></v-text-field>
                            <v-text-field
                                v-model="editServer.uname"
                                label="用户"
                                required
                            ></v-text-field>
                            <v-text-field
                                v-model="editServer.passwd"
                                label="密码"
                                required
                            ></v-text-field>
                        </v-form>
                    </v-container>
                </v-card-text>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="blue darken-1"
                        text
                        @click="addServerDialog = false"
                    >
                        关闭
                    </v-btn>
                    <v-btn
                        color="blue darken-1"
                        text
                        @click="saveServer"
                    >
                        保存
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- about dialog-->
        <v-dialog
            v-model="aboutDialog"
            persistent
            max-width="600"
        >
            <v-card>
                <v-card-title class="text-h5">
                    MQTTV V{{version}}
                </v-card-title>
                <v-card-subtitle>
                    viperasi@2022
                </v-card-subtitle>

                <v-card-text>
                    MQTTV是一个mqtt协议的调试,设计工具.用于协议设计后进行快速协议校验或者客户端/服务端并行开发时的联调工具
                </v-card-text>
                <v-card-text>
                    开源组件:
                    <v-list-item three-line v-for="(item, index) in opensource" :key="index">
                        <v-list-item-content>
                            <v-list-item-title>{{ item.title }}</v-list-item-title>
                            <v-list-item-subtitle>{{ item.license }}</v-list-item-subtitle>
                            <v-list-item-subtitle>{{ item.url }}</v-list-item-subtitle>
                        </v-list-item-content>
                    </v-list-item>
                </v-card-text>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="blue darken-1"
                        text
                        @click="aboutDialog = false"
                    >
                        关闭
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-app-bar>
</template>
<script>

import {Project, Server} from "@/utils/dbutils.js";
import { version } from "../../package.json"

const defaultProject = {
    name: '',
    desc: '',
}

const defaultServer = {
    name: '',
    url: '',
    uname: '',
    passwd: '',
}

const opensource = [{
    title: 'vue',
    url: 'https://vuejs.org',
    license: 'MIT'
},{
    title: 'vuetify',
    url: 'https://vuetifyjs.com',
    license: 'MIT'
},{
    title: 'indb',
    url: 'https://github.com/tangshuang/indb',
    license: 'No License'
},{
    title: 'mqttjs',
    url: 'https://github.com/mqttjs/MQTT.js',
    license: 'MIT'
},{
    title: 'simple-code-editory',
    url: 'https://github.com/justcaliturner/simple-code-editor',
    license: 'MIT'
},{
    title: 'tauri',
    url: 'https://tauri.app/',
    license: 'Apache-2.0, MIT'
}]

const projectLabel = [
    {
        label: '名称',
        key: 'name'
    }, {
        label: '描述',
        key: 'desc'
    }
]

const serverLabel = [
    {
        label: '名称',
        key: 'name'
    }, {
        label: '连接',
        key: 'url'
    }, {
        label: '用户',
        key: 'uname'
    }, {
        label: '密码',
        key: 'passwd'
    }
]

export default {
    name: 'Header',
    props: ['project', 'server'],
    data() {
        return {
            version,
            opensource,
            currProject: null,
            currProjectId: null,
            currServer: null,
            currServerId: null,
            projects: [],
            servers: [],
            projectLabel,
            serverLabel,
            editProject: {},
            editServer: {},
            addProjectDialog: false,
            addServerDialog: false,
            aboutDialog: false,
        }
    },
    methods: {
        resetDefaultProject() {
            this.editProject = {...defaultProject}
            this.addProjectDialog = false
        },
        showAddProject() {
            this.addProjectDialog = true
        },
        chooseProject(item) {
            this.currProject = {...item}
            this.$emit('chooseProject', this.currProject)
        },
        clearChooseProject() {
            this.currProject = null
        },
        async showEditProject() {
            if (this.currProject) {
                this.editProject = {...this.currProject}
                this.addProjectDialog = true
            }
        },
        async delProject(){
            if(this.currProject){
                await Project.del(this.currProject.id)
                this.clearChooseProject()
                this.projects = await Project.getAll()
            }
        },
        async saveProject() {
            console.log(this.editProject)
            let project = new Project(this.editProject.name, this.editProject.desc)
            if (this.editProject.id) {
                project.id = this.editProject.id
            }
            try {
                await project.save()
            } catch (err) {
                console.err(err)
            }
            this.resetDefaultProject()
            this.clearChooseProject()
            this.projects = await Project.getAll()
        },
        resetDefaultServer() {
            this.editServer = {...defaultServer}
            this.addServerDialog = false
        },
        showAddServer() {
            this.addServerDialog = true
        },
        chooseServer(item) {
            this.currServer = {...item}
            this.$emit('chooseServer', this.currServer)
        },
        clearChooseServer() {
            this.currServer = null
        },
        async showEditServer() {
            if (this.currServer) {
                this.editServer = {...this.currServer}
                this.addServerDialog = true
            }
        },
        async delServer(){
            if(this.currServer){
                await Server.del(this.currServer.id)
                this.clearChooseServer()
                this.servers = await Server.getAll()
            }
        },
        async saveServer() {
            let server = new Server(this.editServer.name, this.editServer.url, this.editServer.uname, this.editServer.passwd)
            if (this.editServer.id) {
                server.id = this.editServer.id
            }
            try {
                await server.save()
            } catch (err) {
                console.err(err)
            }
            this.resetDefaultServer()
            this.clearChooseServer()
            this.servers = await Server.getAll()
        },
        async getAll() {
            this.projects = await Project.getAll()
            this.servers = await Server.getAll()
        },
    },
    mounted() {
        this.getAll()
    }
}
</script>